<template>
  <div class="cockpit-container">
    <!-- 驾驶舱页面头部 -->
    <div class="cockpit-header">
      <h1 class="cockpit-title">
        <el-icon class="title-icon">
          <Monitor />
        </el-icon>
        智能驾驶舱
      </h1>
      <p class="cockpit-subtitle">实时监控与数据分析中心</p>
    </div>

    <!-- 核心指标卡片 -->
    <el-row :gutter="20" class="metrics-row">
      <el-col :span="6" :xs="12">
        <el-card shadow="hover" class="metric-card">
          <div class="metric-content">
            <div class="metric-icon primary">
              <el-icon size="24"><DataAnalysis /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">2,456</div>
              <div class="metric-label">实时数据</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="12">
        <el-card shadow="hover" class="metric-card">
          <div class="metric-content">
            <div class="metric-icon success">
              <el-icon size="24"><TrendCharts /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">99.2%</div>
              <div class="metric-label">系统稳定性</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="12">
        <el-card shadow="hover" class="metric-card">
          <div class="metric-content">
            <div class="metric-icon warning">
              <el-icon size="24"><Warning /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">5</div>
              <div class="metric-label">待处理事件</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="12">
        <el-card shadow="hover" class="metric-card">
          <div class="metric-content">
            <div class="metric-icon info">
              <el-icon size="24"><Connection /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">128</div>
              <div class="metric-label">在线设备</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <span class="chart-title">系统性能监控</span>
          </template>
          <div class="chart-placeholder">
            <el-icon size="48" color="#409EFF"><TrendCharts /></el-icon>
            <p>性能监控图表</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <span class="chart-title">资源使用情况</span>
          </template>
          <div class="chart-placeholder">
            <el-icon size="48" color="#67C23A"><DataAnalysis /></el-icon>
            <p>资源使用图表</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作区域 -->
    <el-row :gutter="20" class="actions-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <span class="chart-title">快捷操作</span>
          </template>
          <div class="action-buttons">
            <el-button type="primary" size="large">
              <el-icon><Monitor /></el-icon>
              系统监控
            </el-button>
            <el-button type="success" size="large">
              <el-icon><DataAnalysis /></el-icon>
              数据分析
            </el-button>
            <el-button type="info" size="large">
              <el-icon><Document /></el-icon>
              报告中心
            </el-button>
            <el-button type="warning" size="large">
              <el-icon><Setting /></el-icon>
              系统配置
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Cockpit" lang="ts">
import { ref, onMounted } from 'vue'
import {
  Monitor,
  DataAnalysis,
  TrendCharts,
  Warning,
  Connection,
  Document,
  Setting
} from '@element-plus/icons-vue'

// 页面初始化
onMounted(() => {
  console.log('智能驾驶舱页面已加载')
})
</script>

<style scoped>
.cockpit-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.cockpit-header {
  text-align: center;
  margin-bottom: 30px;
}

.cockpit-title {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.title-icon {
  color: #409EFF;
}

.cockpit-subtitle {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.metrics-row {
  margin-bottom: 20px;
}

.metric-card {
  height: 120px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.metric-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 10px;
}

.metric-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.metric-icon.primary {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.metric-icon.success {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.metric-icon.warning {
  background-color: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.metric-icon.info {
  background-color: rgba(144, 147, 153, 0.1);
  color: #909399;
}

.metric-info {
  flex: 1;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.metric-label {
  font-size: 14px;
  color: #606266;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-title {
  font-weight: bold;
  color: #303133;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.chart-placeholder p {
  margin-top: 10px;
  font-size: 14px;
}

.actions-row {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-buttons .el-button {
  min-width: 140px;
}

@media (max-width: 768px) {
  .cockpit-container {
    padding: 10px;
  }
  
  .cockpit-title {
    font-size: 24px;
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .action-buttons .el-button {
    min-width: 120px;
    margin-bottom: 10px;
  }
}
</style>
